/*
 * @Author: Zero 
 * @Date: 2019-11-13 15:28:18 
 * @Last Modified by: Zero
 * @Last Modified time: 2019-11-14 16:39:54
 */
<template>
  <div class="tabs-component" >
    <div class="tabs-component__header">
      <h3 class="tabs-component__header--title">{{title}}</h3>
      <ul class="tabs-component__header--nav" :class="`is-${tabPosition}`">
        <li :class="{'is-active':pane.name==currentName}" @click="setCurrentName(pane.name)" v-for="(pane, index) in panes" :key="index">{{pane.label}}</li>
      </ul>
    </div>
    <div class="tabs-component__body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabsComponent",
  props: {
    value: { // 不传默认为第一个显示
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ''
    },
    tabPosition: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      currentName: '',
      panes: []
    }
  },
  watch: {
    value(v) {
      this.currentName = v;
    }
  },
  provide() {
    return {
      rootTabs: this
    };
  },
  mounted() {
    this.calcPaneInstances();
    if(!this.value) {
      this.setCurrentName(this.panes[0].name);
    }
  },
  updated() {
    this.calcPaneInstances();
  },
  methods: {
    setCurrentName(v) {
      this.currentName = v;
      this.$emit('input', v);
    },
    calcPaneInstances(isForceUpdate = false) {
      if (this.$slots.default) { // this.$slots.default 默认的所有slot插槽
        const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
          vnode.componentOptions && vnode.componentOptions.Ctor.options.name === "tabsPanelComponent");
        // update indeed

        const panes = paneSlots.map(({ componentInstance }) => componentInstance);
        // 检查每个子组件是否变化
        const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
        if (isForceUpdate || panesChanged) {
          this.panes = panes;
        }
      } else if (this.panes.length !== 0) {
        this.panes = [];
      }
    },
  }
}
</script>

<style lang="less" scope>
.tabs-component {
  .tabs-component__header {
    position: relative;
    .tabs-component__header--title {
      font-size: 24px;
      font-weight: bold;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 20px;
    }
    .tabs-component__header--nav {
      width: fit-content;
      position: absolute;
      right: 0;
      top: 10px;
      display: flex;
      // 自定义 位置style
      &.is-left {
        left: 140px;
      }
      &.is-right {
        right: 0;
      }
      li {
        line-height: 1;
        margin-right: 40px;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
        padding-bottom: 14px;
        border-bottom: 3px solid transparent;
        &.is-active {
          border-bottom: 3px solid #216DE5;
          color: #216DE5;
        }
        &:last-child{
          margin-right: 0;
      }
      }
    }
  }
  .tabs-component__body {

  }
}
</style>
